<script setup lang="ts">
import { ref } from 'vue'

// 宠物展示数据
const featuredPets = ref([
  {
    name: '旺财',
    breed: '金毛寻回犬',
    description: '一只友好而聪明的金毛，喜欢玩球和散步。',
    image: '/src/assets/pets/金毛.jpg'
  },
  {
    name: '咪咪',
    breed: '布偶猫',
    description: '一只温柔安静的布偶猫，喜欢被拥抱和梳理毛发。',
    image: '/src/assets/pets/布偶猫.jpg'
  },
  {
    name: '豆豆',
    breed: '柯基犬',
    description: '一只活泼可爱的小柯基，拥有迷人的微笑和短腿。',
    image: '/src/assets/pets/柯基.jpg'
  },
  {
    name: '雪球',
    breed: '萨摩耶犬',
    description: '一只拥有纯白毛发和天使般微笑的萨摩耶。',
    image: '/src/assets/pets/萨摩耶.jpg'
  },
  {
    name: '小橘',
    breed: '橘猫',
    description: '一只活泼可爱的橘猫，喜欢晒太阳和追逐玩具。',
    image: '/src/assets/pets/橘猫.jpg'
  },
  {
    name: '布布',
    breed: '拉布拉多',
    description: '一只忠诚友善的拉布拉多，是家庭的好伙伴。',
    image: '/src/assets/pets/拉布拉多.jpg'
  },
  {
    name: '小白',
    breed: '波斯猫',
    description: '一只优雅高贵的波斯猫，拥有长长的毛发和温柔的性格。',
    image: '/src/assets/pets/波斯猫.jpg'
  }
])
</script>

<template>
  <div class="pets-showcase">
    <!-- 装饰性背景元素 -->
    <div class="decoration-bg">
      <div class="floating-shapes">
        <div class="shape shape-1"></div>
        <div class="shape shape-2"></div>
        <div class="shape shape-3"></div>
        <div class="shape shape-4"></div>
        <div class="shape shape-5"></div>
        <div class="shape shape-6"></div>
        <div class="shape shape-7"></div>
        <div class="shape shape-8"></div>
      </div>
      <div class="paw-prints">
        <div class="paw-print paw-1">🐾</div>
        <div class="paw-print paw-2">🐾</div>
        <div class="paw-print paw-3">🐾</div>
        <div class="paw-print paw-4">🐾</div>
        <div class="paw-print paw-5">🐾</div>
        <div class="paw-print paw-6">🐾</div>
      </div>
    </div>
    
    <!-- 标题装饰 -->
    <div class="showcase-header">
      <div class="title-decoration left">
        <span class="decoration-line"></span>
        <span class="decoration-icon">🐕</span>
        <span class="decoration-line"></span>
      </div>
      <h2 class="showcase-title">宠物之星</h2>
      <div class="title-decoration right">
        <span class="decoration-line"></span>
        <span class="decoration-icon">🐱</span>
        <span class="decoration-line"></span>
      </div>
    </div>

    <el-carousel :interval="2000" type="card" height="300px">
      <el-carousel-item v-for="pet in featuredPets" :key="pet.name">
        <div class="pet-card">
          <div class="pet-card-image" :style="{ backgroundImage: `url(${pet.image})` }"></div>
          <div class="pet-card-content">
            <h3 class="pet-name">{{ pet.name }}</h3>
            <p class="pet-breed">{{ pet.breed }}</p>
            <p class="pet-description">{{ pet.description }}</p>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 底部装饰 -->
    <div class="showcase-footer">
      <div class="footer-decoration">
        <span class="decoration-dot"></span>
        <span class="decoration-dot"></span>
        <span class="decoration-dot"></span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.pets-showcase {
  margin-bottom: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 20px 0;
  overflow: hidden;
}

/* 装饰性背景 */
.decoration-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
}

/* 浮动形状 */
.floating-shapes {
  position: absolute;
  width: 100%;
  height: 100%;
}

.shape {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 152, 0, 0.1));
  animation: float 6s ease-in-out infinite;
}

.shape-1 {
  width: 48px;
  height: 48px;
  top: 9%;
  left: 4%;
  animation-delay: 0s;
}

.shape-2 {
  width: 38px;
  height: 38px;
  top: 15%;
  right: 7%;
  animation-delay: 1s;
}

.shape-3 {
  width: 40px;
  height: 40px;
  bottom: 12%;
  left: 7%;
  animation-delay: 2s;
}

.shape-4 {
  width: 32px;
  height: 32px;
  bottom: 5%;
  right: 12%;
  animation-delay: 3s;
}

.shape-5 {
  width: 28px;
  height: 28px;
  top: 22%;
  left: 18%;
  animation-delay: 1.5s;
}

.shape-6 {
  width: 28px;
  height: 28px;
  bottom: 22%;
  right: 18%;
  animation-delay: 2.5s;
}

.shape-7 {
  width: 36px;
  height: 36px;
  top: 5%;
  left: 60%;
  animation-delay: 2.2s;
}

.shape-8 {
  width: 30px;
  height: 30px;
  bottom: 8%;
  left: 70%;
  animation-delay: 3.5s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
  }
}

/* 爪印装饰 */
.paw-prints {
  position: absolute;
  width: 100%;
  height: 100%;
}

.paw-print {
  position: absolute;
  font-size: 24px;
  opacity: 0.3;
  animation: pawFloat 8s ease-in-out infinite;
}

.paw-1 {
  top: 18%;
  left: 12%;
  animation-delay: 0s;
}

.paw-2 {
  top: 7%;
  right: 15%;
  animation-delay: 2s;
}

.paw-3 {
  bottom: 18%;
  left: 22%;
  animation-delay: 4s;
}

.paw-4 {
  bottom: 13%;
  right: 10%;
  animation-delay: 6s;
}

.paw-5 {
  top: 13%;
  left: 68%;
  animation-delay: 5s;
}

.paw-6 {
  bottom: 11%;
  left: 42%;
  animation-delay: 7s;
}

@keyframes pawFloat {
  0%, 100% {
    transform: translateY(0px) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-15px) scale(1.1);
    opacity: 0.6;
  }
}

/* 标题装饰 */
.showcase-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.showcase-title {
  font-size: 28px;
  font-weight: 700;
  color: #8d6e63;
  margin: 0 20px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, #8d6e63, #a1887f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.title-decoration {
  display: flex;
  align-items: center;
  gap: 8px;
}

.decoration-line {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d7ccc8, transparent);
  border-radius: 1px;
}

.decoration-icon {
  font-size: 20px;
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* 底部装饰 */
.showcase-footer {
  margin-top: 15px;
  position: relative;
  z-index: 1;
}

.footer-decoration {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.decoration-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffc107, #ff9800);
  animation: pulse 2s ease-in-out infinite;
}

.decoration-dot:nth-child(2) {
  animation-delay: 0.5s;
}

.decoration-dot:nth-child(3) {
  animation-delay: 1s;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
}

.pet-card {
  border-radius: 16px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  height: 100%;
  position: relative;
  z-index: 1;
}

.pet-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.pet-card-image {
  height: 60%;
  background-size: cover;
  background-position: center;
}

.pet-card-content {
  padding: 15px;
}

.pet-name {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 4px;
}

.pet-breed {
  font-size: 13px;
  color: #606266;
  margin: 0 0 8px;
}

.pet-description {
  font-size: 12px;
  color: #909399;
  line-height: 1.5;
  margin: 0;
}

:deep(.el-carousel__container) {
  height: 300px !important;
  position: relative;
  z-index: 1;
}

:deep(.el-carousel__item) {
  border-radius: 16px;
  overflow: hidden;
  width: 500px !important;
  margin: 0 auto;
}

:deep(.el-carousel__item--card) {
  width: 500px !important;
}

:deep(.el-carousel__item--card.is-active) {
  width: 500px !important;
}

:deep(.el-carousel) {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
</style> 